<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>前端开发规范</title>
    <link rel="stylesheet" href="css/public/base.css">
    <link rel="stylesheet" href="css/manual.css">
</head>
<body class="manual">
<header id="headerWrap"></header>

<section id="content">
    <article class="articles">
        <h1>web前端开发规范文档</h1>
        <ul class="list">
            <li><a href="#purpose">一．规范目的</a></li>
            <li><a href="#rule">二．基本准则</a></li>
            <li><a href="#file">三．文件规范</a></li>
            <li><a href="#htm">四．html书写规范</a></li>
            <li><a href="#css">五．css书写规范</a></li>
            <li><a href="#js">六．javascript书写规范</a></li>
            <li><a href="#img">七．图片规范</a></li>
            <li><a href="#note">八．注释规范</a></li>
            <li><a href="#tools">九．开发及测试工具约定</a></li>
            <li><a href="#other">十．其他约定</a></li>

        </ul>
        <h5 id="purpose">一．规范目的</h5>
        <p>为提高团队协作效率， 便于后台人员添加功能及前端后期优化维护，输出高质量的文档，特制订此文档.本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。</p>

        <h5 id="rule">二．基本准则</h5>
        <p>符合web标准， 语义化html， 结构表现行为分离， 兼容性优良. 页面性能方面， 代码要求简洁明了有序， 尽可能的减小服务器负载， 保证最快的解析速度.</p>

        <h5 id="file">三．文件规范</h5>
        <p>1. html， css， js， images文件均归档至"系统开发规范"约定的目录中；</p>
        <p>2. html文件命名： 英文驼峰式命名， 后缀.html. 同时将对应界面稿放于同目录中， 若界面稿命名为中文， 请重命名与html文件同名， 以方便后端添加功能时查找对应页面；</p>
        <p>3. css文件命名： 英文驼峰式命名， 后缀.css. 共用base.css， 首页index.css， 其他页面依实际模块需求命名.；</p>
        <p>4. js文件命名： 英文驼峰式命名， 后缀.js. 共用common.js， 其他依实际模块需求命名.</p>

        <h5 id="htm">四．html书写规范</h5>
        <p>1，文档类型声明及编码： 统一为html5的声明类型<!DOCTYPE html>；编码统一为<meta charset=”utf-8″/>，书写时利用IDE实现层次分明的缩进.</p>
        <p>2，非特殊情况下css文件必须在<head>…</head>之间引入，选择link方式引入而非@import形式.</p>
        <p>3，非特殊情况下js文件必须在页面底部引入.</p>
        <p>4，引入样式文件或JavaScript文件时，须略去默认类型声明（type=”* ”）</p>
        <p>5，引入JS库文件，文件名须包含库名称及版本号及是否为压缩版，比如：jquery-1.4.1.min.js；</p>
        <p>6，引入插件，文件名格式为库名称+插件名称，比如：jQuery.cookie.js.</p>
        <p>7，所有HTML标签嵌套必须是正确的，禁止出现多出或者少出闭合标签的情况.</p>
        <p>8，所有编码均遵循xhtml标准，标签.属性.属性命名必须由小写字母及下划线数字组成，且所有标签必须闭合，包括br(&lt;br /&gt;)，hr(&lt;hr /&gt;)等；属性值必须用双引号包括.</p>
        <p>9，充分利用无兼容性问题的html自身标签，比如span.em.strong.optgroup.label……</p>
        <p>10，需要为html元素添加自定义属性的时候，首先要考虑下有没有默认的已有的合适标签去设置，如果没有，须以”data-”为前缀来添加自定义属性，避免使用”data：”等其他命名方式.</p>
        <p>11，语义化html，如标题根据重要性用h1-h6(同一页面只能有一个h1)，段落标记用p，列表用ul，内联元素中不可嵌套块状元素.</p>
        <p>12，尽可能减少div嵌套</p>
        <p>13，书写链接地址时， 必须避免重定向，例如：href="http：//www.baidu.com/"， 须在URL地址后面加上“/”；</p>
        <p>14，在页面中尽量避免使用内嵌样式表，即在标签内使用style=”…”.</p>
        <p>15，必须为含有描述性表单元素(input， textarea)添加label</p>
        <p>16，以背景形式呈现的图片，尽量写入css样式中； 重要图片必须加上alt属性； 给重要的元素和截断的元素加上title；</p>
        <p>17，给区块代码及重要功能(比如循环)加上注释， 方便后台添加功能；</p>
        <p>18，特殊符号使用：尽可能使用代码替代：比比如 <(&lt；) & >(&gt；) & 空格( &nbsp；) & »(&raquo；) 等等；</p>
        <p>19，尽量避免使用过度复杂的HTML结构. 书写页面过程中， 请考虑向后扩展性；</p>



        <h5 id="css">五．css书写规范</h5>
        <p>1. 编码统一为utf-8；</p>
        <p>2. 协作开发及分工： i会根据各个模块， 同时根据页面相似程序， 事先写好大体框架文件，分配给前端人员实现内部结构&表现&行为；共用css文件base.css由i书写， 协作开发过程中， 每个页面请务必都要引入， 此文件包含reset及头部底部样式， 此文件不可随意修改；</p>
        <p>3. class与id的使用： id是唯一的并是父级的，class是可以重复的并是子级的，所以id仅使用在大的模块上，class可用在重复使用率高及子级中； id原则上都是由i分发框架文件时命名的， 为JavaScript预留钩子的除外；</p>
        <p>4. 为JavaScript预留钩子的命名， 请以 js_ 起始， 比如： js_hide， js_show；</p>
        <p>5. class与id命名： 大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由小写英文 &数字& _来组合命名， 如i_comment， fontred， width200； 避免使用中文拼音，尽量使用简易的单词组合； 总之，命名要语义化， 简明化.</p>
        <p>6. 规避class与id命名(此条重要，若有不明白请及时与i沟通)：</p>
            <p>a， 通过从属写法规避， 示例见d；</p>
            <p>b， 取父级元素id/class命名部分命名， 示例见d；</p>
            <p>c， 重复使用率高的命名， 请以自己代号加下划线起始， 比如i_clear；</p>
            <p>d， a，b两条， 适用于在2中已建好框架的页面， 如：</p>
        <p>7. css属性书写顺序， 建议遵循：  布局定位属性-->自身属性-->文本属性-->其他属性. 此条可根据自身习惯书写， 但尽量保证同类属 性写在一起.</p>
        <p>8. 书写代码前， 考虑并提高样式重复使用率；</p>
        <p>9. 充分利用html自身属性及样式继承原理减少代码量</p>
        <p>10. 样式表中中文字体名， 请务必转码成unicode码， 以避免编码错误时乱码；</p>
        <p>11. 背景图片请尽可能使用sprite技术， 减小http请求， 考虑到多人协作开发， sprite按模块制作；</p>
        <p>12. 使用table标签时(尽量避免使用table标签)， 请不要用width/ height/cellspacing/cellpadding等table属性直接定义表现， 应尽可能的利用table自身私有属性分离结构与表现</p>
        <p>13. 杜绝使用<meta http-equiv="X-UA-Compatible" content="IE=7" /> 兼容 ie8；</p>
        <p>14. 用png图片做图片时， 要求图片格式为png-8格式，若png-8实在影响图片质量或其中有半透明效果， 请为ie6单独定义背景：</p>
        <p>15. 避免兼容性属性的使用， 比如text-shadow || css3的相关属性；</p>
        <p>16. 减少使用影响性能的属性， 比如position：absolute || float ；</p>
        <p>17. 必须为大区块样式添加注释， 小区块适量注释；</p>
        <p>18. 代码缩进与格式： 建议单行书写， 可根据自身习惯， 后期优化i会统一处理；</p>


        <h5 id="js">六．javascript书写规范</h5>
        <p>1. 文件编码统一为utf-8， 书写过程过， 每行代码结束必须有分号； 原则上所有功能均根据XXX项目需求原生开发， 以避免网上down下来的代码造 成的代码污染(沉冗代码 || 与现有代码冲突 || ...)；</p>
        <p>2. 库引入： 原则上仅引入jQuery库， 若需引入第三方库， 须与团队其他人员讨论决定；</p>
        <p>3. 变量命名： 驼峰式命名. 原生JavaScript变量要求是纯英文字母， 首字母须小写， 如iTaoLun；</p>
        jQuery变量要求首字符为'_'， 其他与原生JavaScript 规则相同， 如： _iTaoLun；</p>
        另， 要求变量集中声明， 避免全局变量.</p>
        <p>4. 类命名： 首字母大写， 驼峰式命名. 如 ITaoLun；</p>
        <p>5. 函数命名： 首字母小写驼峰式命名. 如iTaoLun()；</p>
        <p>6. 命名语义化， 尽可能利用英文单词或其缩写；</p>
        <p>7. 尽量避免使用存在兼容性及消耗资源的方法或属性， 比如eval() & innerText；</p>
        <p>8. 后期优化中， JavaScript非注释类中文字符须转换成unicode编码使用， 以避免编码错误时乱码显示；</p>
        <p>9. 代码结构明了， 加适量注释. 提高函数重用率；</p>
        <p>10. 注重与html分离， 减小reflow， 注重性能.</p>


        <h5 id="img">七．图片规范</h5>
        <p>1. 所有页面元素类图片均放入img文件夹， 测试用图片放于img/demoimg文件夹；</p>
        <p>2. 图片格式仅限于gif || png || jpg；</p>
        <p>3. 命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇， 便于团队其他成员理 解； 另， 命名分头尾两部分， 用下划线隔开， 比如ad_left01.gif || btn_submit.gif；</p>
        <p>4. 在保证视觉效果的情况下选择最小的图片格式与图片质量， 以减少加载时间；</p>
        <p>5. 尽量避免使用半透明的png图片(若使用， 请参考css规范相关说明)；</p>
        <p>6. 运用css sprite技术集中小的背景图或图标， 减小页面http请求， 但注意， 请务必在对应的sprite psd源图中划参考线， 并保存至img目录 下.</p>


        <h5 id="note">八．注释规范</h5>
        <p>1. html注释： 注释格式 <!--这儿是注释-->， '--'只能在注释的始末位置，不可置入注释文字区域；</p>
        <p>2. css注释： 注释格式 /*这儿是注释*/；</p>
        <p>3. JavaScript注释， 单行注释使用'//这儿是单行注释' ，多行注释使用 /* 这儿有多行注释 */；</p>


        <h5 id="tools">九．开发及测试工具约定</h5>
        <p>建议使用Aptana || Dw || Vim ， 亦可根据自己喜好选择， 但须遵循如下原则：</p>
        <p>1. 不可利用IDE的视图模式'画'代码；</p>
        <p>2. 不可利用IDE生成相关功能代码， 比如Dw内置的一些功能js；</p>
        <p>3. 编码必须格式化， 比如缩进；</p>
        <p>测试工具： 前期开发仅测试FireFox & IE6 & IE7 & IE8 ， 后期优化时加入Opera & Chrome & Safari；</p>
        <p>建议测试顺序： FireFox-->IE7-->IE8-->IE6-->Opera-->Chrome-->Safari， 建议安装firebug及IE Tab Plus插件.</p>


        <h5 id="other">十．其他约定</h5>


    </article>
</section>

<footer id="footer"></footer>
<a id="j_BackToTop" class="back_to_top" href="javascript:void(0)"><em></em></a>
<script src="js/public/jquery-1.9.0.min.js"></script>
<script src="js/public/globle.js"></script>
</body>
</html>